<template>
  <view class="flex-col justify-start relative page">
    <view class="section"></view>
    <image class="image pos" @click="gobacks" src="/static/assets5/d88d1ea18d9f1749015a1248bb8ed0fa.png" />
    <text class="font text pos_2">预约</text>
    <view class="flex-row items-center section_2 pos_3"  @click="gofss" >
      <image class="shrink-0 image" src="/static/assets5/32a931e4727265c18d1b64c9b7c5d493.png" />
      <view class="ml-14 flex-col flex-1">
        <view class="flex-row items-baseline">
          <text class="font_2">宋哲</text>
          <text class="ml-8 font_3 text_2">13001363102</text>
        </view>
        <text class="mt-12 font_4 text_3">重庆市重庆市丰都县名山街道14幢7 ...</text>
      </view>
      <image class="ml-14 shrink-0 image_2" src="/static/assets5/b5b91eddf88856dd6f98eb78a1d31772.png" />
    </view>
    <view class="flex-col section_3 pos_4">
      <view class="flex-row items-center">
        <image class="image_3" src="/static/assets5/b8b2c98c6c4c9491bd007c06e0fa5194.png" />
        <text class="font_4 text_4 ml-5">杨紫夏</text>
      </view>
      <view class="mt-12 flex-row justify-between items-center">
        <view class="flex-row">
          <image class="image_4" src="/static/assets5/83583be68c7202425e7e955af6aa904d.png" />
          <view class="flex-col items-start self-start group ml-9">
            <text class="font_2 text_5">City walk</text>
            <text class="font_5 text_7 mt-17">60分钟</text>
          </view>
        </view>
        <view class="flex-col">
          <view class="flex-row">
            <image class="shrink-0 image_5 image_6" src="/static/assets5/77e16a4affeb34025646e1b02ebcd8a6.png" />
            <text class="ml-6 font_2 text_6">199</text>
          </view>
          <view class="flex-row items-center mt-39">
            <view class="flex-row justify-start items-center image-wrapper">
              <image class="image_7" src="/static/assets5/74cb88164c46afeefcc35942282ba57f.png" />
            </view>
            <view class="ml-8 flex-row justify-start items-center image-wrapper"><text class="text_8">2</text></view>
            <view class="ml-8 flex-row justify-start items-center image-wrapper">
              <image class="image_7" src="/static/assets5/81ebc0adbb92fe03300d778db776ca8b.png" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex-col justify-start section_4 pos_5">
      <view class="flex-row justify-between items-center group_2">
        <text class="font_4 text_9">服务时间</text>
        <view class="flex-row items-center">
          <text class="font_4 text_10">2025/2/21 12:00,13:00</text>
          <image class="ml-10 shrink-0 image_2" src="/static/assets5/b5b91eddf88856dd6f98eb78a1d31772.png" />
        </view>
      </view>
    </view>
    <view class="flex-row justify-between items-center section_5 pos_6">
      <text class="font_4 text_11">订单备注</text>
      <view class="flex-row items-center" @click="show =true ">
        <text class="font_4 text_12">添加备注</text>
        <image class="ml-2 shrink-0 image_2" src="/static/assets5/b5b91eddf88856dd6f98eb78a1d31772.png" />
      </view>
    </view>
    <view class="flex-row justify-between items-center section_6 pos_7">
      <view class="flex-row">
        <image class="image_8" src="/static/assets5/f17b7c459cb1d0f806d58083285d0ae6.png" />
        <view class="flex-col ml-9">
          <text class="font_4 text_13">账户余额</text>
          <view class="mt-10 flex-row items-center">
            <image class="shrink-0 image_5" src="/static/assets5/77e16a4affeb34025646e1b02ebcd8a6.png" />
            <text class="ml-6 font_5 text_14">12345</text>
          </view>
        </view>
      </view>
      <image class="image_9" src="/static/assets5/dbe5e00da4d87b8076cfdc5096f1b6e3.png" />
    </view>
    <text class="text_15 pos_8">将支付订单总金额的30%，剩余70%订单金额请线下支付</text>
    <view class="flex-row justify-between items-center section_7 pos_9 fieh">
      <view class="flex-row items-center">
        <text class="font_3 text_16">合计：</text>
        <image class="shrink-0 image_10 ml-5" src="/static/assets5/528a8541abca09af508726b69ed9e846.png" />
        <text class="font text_17 ml-5">66</text>
      </view>
      <view class="flex-col justify-start items-center text-wrapper"><text class="font_2 text_18">立即支付</text></view>
    </view>
    <view class="section_8 pos_10"></view>
	
	<!-- 备注弹框 -->
	<up-overlay :show="show" @click="show = false"
		style="display: flex;align-items: center;justify-content: center;z-index: 9999999999999;">
		<view class="pouper" @tap.stop>
	
			<view class="rosh">
				<image @click="show = false" src="/static/dazi/clos.png" mode=""></image>
			</view>
			<view class="shudcode">
				备注
			</view>
	
			<view class="iosld">
				<input type="text" placeholder="请输入备注" placeholder-class="co" v-model="memu" />
	
			</view>
	
	
			<view class="busnd btnact ash" @click="entmemn">
				确认
			</view>
	
	
	
		</view>
	</up-overlay>
	
	
  </view>
</template>

<script>
  export default {
    components: {},
    props: {},
    data() {
      return {
		  show:false,
		  numbtime:1,//时间次数
	  };
    },

    methods: {
		gobacks() {
			// #ifdef H5
			history.back();
			// #endif
		
			// #ifdef APP
			uni.navigateBack()
			// #endif	
		},
		gofss(){
		uni.navigateTo({
			url:'/pages/play/info'
		})	
		},
	},
  };
</script>

<style scoped lang="scss">
	.btnact {
		background-color: #fb75d6 !important;
	}
	
	.ash {
		margin-top: 30rpx !important;
	}
	
	.busnd {
		margin: 100rpx 0 30rpx;
		background-color: rgba(255, 154, 233, 0.4);
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 32rpx;
	}
	
	
	
	.u-transition {
		backdrop-filter: blur(3px);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) -30%, rgba(255, 255, 255, 0) 50%);
	
	}
	.shudcode {
		color: 32rpx;
		font-size: 32rpx;
		text-align: center;
		color: #2A222F;
	}
	
	.co {
		color: rgba(195, 176, 195, 1);
		font-size: 28rpx;
	}
	
	.iosld {
		margin: 50rpx 0;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
	
		input {
			margin-right: 20rpx;
			padding: 0 20rpx;
			height: 100rpx;
			border: 1px solid rgba(237, 229, 237, 1);
			border-radius: 30rpx;
	
		}
	
		.ksbq {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
	
			image {
				border: 1px solid #ccc;
				width: 240rpx;
				height: 100rpx;
			}
	
			.tsye {
				margin: 20rpx 0;
				color: rgba(251, 117, 214, 1);
				font-size: 24rpx;
			}
		}
	
	}
	
	.pouper {
		background-color: #fff;
		width: 600rpx;
	
		padding: 30rpx;
		border-radius: 30rpx;
	}
	
	.rosh {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
	
	.isehd {
		height: 32rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}
	
	.seacus {
		display: flex;
		align-items: center;
	}
	
	.z1 {
		color: rgba(251, 117, 214, 1) !important;
	}
	
	.serins {
		text {
			color: rgba(131, 116, 135, 1);
			font-size: 24rpx;
		}
	}
	
	.isehd {
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
	.fieh{
		// position: fixed !important;
		// bottom: 0;
		// left: 0;
		// right: 0;
	}
  .ml-9 {
    margin-left: 18rpx;
  }
  .mt-17 {
    margin-top: 34rpx;
  }
  .mt-39 {
    margin-top: 78rpx;
  }
  .ml-5 {
    margin-left: 10rpx;
  }
  .page {
    background-color: #ffffff;
    background-image: url('/static/assets5/e9cd3fc4ee4eabc1262262a469ab1c21.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    .section {
      background-image: url('/static/assets5/e9cd3fc4ee4eabc1262262a469ab1c21.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 750rpx;
      height: 1624rpx;
    }
    .image {
      width: 48rpx;
      height: 48rpx;
    }
    .pos {
      position: absolute;
      left: 40rpx;
      top: 112rpx;
    }
    .font {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 700;
    }
    .text {
      color: #2a222f;
      line-height: 37.08rpx;
    }
    .pos_2 {
      position: absolute;
      left: 113.64rpx;
      top: 117rpx;
    }
    .section_2 {
      padding: 40rpx 32rpx;
      background-color: #ffffff;
      border-radius: 32rpx;
      .text_2 {
        color: #fb75d6;
        line-height: 20.78rpx;
      }
      .text_3 {
        color: #837386;
        line-height: 26.12rpx;
      }
    }
    .pos_3 {
      position: absolute;
      left: 40rpx;
      right: 40rpx;
      top: 208rpx;
    }
    .section_3 {
      padding: 32rpx;
      background-color: #ffffff;
      border-radius: 32rpx;
      .image_3 {
        border-radius: 64rpx;
        width: 64rpx;
        height: 64rpx;
      }
      .text_4 {
        line-height: 25.56rpx;
      }
      .image_4 {
        border-radius: 32rpx;
        width: 160rpx;
        height: 160rpx;
      }
      .group {
        margin-top: 12rpx;
        .text_5 {
          line-height: 29.64rpx;
        }
        .text_7 {
          line-height: 22rpx;
        }
      }
      .image_6 {
        margin-left: 60rpx;
      }
      .text_6 {
        line-height: 23.74rpx;
      }
      .image-wrapper {
        width: 40rpx;
        .image_7 {
          border-radius: 20rpx;
          width: 40rpx;
          height: 40rpx;
        }
        .text_8 {
          color: #2a222f;
          font-size: 32rpx;
          font-family: PingFang SC;
          line-height: 23.3rpx;
        }
      }
    }
    .pos_4 {
      position: absolute;
      left: 40rpx;
      right: 40rpx;
      top: 392rpx;
    }
    .font_4 {
      font-size: 28rpx;
      font-family: PingFang SC;
      line-height: 24.48rpx;
      color: #2a222f;
    }
    .font_2 {
      font-size: 32rpx;
      font-family: PingFang SC;
      line-height: 29.76rpx;
      font-weight: 700;
      color: #2a222f;
    }
    .section_4 {
      background-color: #ffffff;
      border-radius: 32rpx 32rpx 0rpx 0rpx;
      height: 112rpx;
      .group_2 {
        margin: 0 32rpx;
        padding: 40rpx 0;
        border-bottom: solid 2rpx #f7eff8;
        .text_9 {
          line-height: 25.98rpx;
        }
        .text_10 {
          color: #fb75d6;
          line-height: 27.72rpx;
        }
      }
    }
    .pos_5 {
      position: absolute;
      left: 40rpx;
      right: 40rpx;
      top: 794rpx;
    }
    .image_2 {
      width: 32rpx;
      height: 32rpx;
    }
    .section_5 {
      padding: 40rpx 32rpx;
      background-color: #ffffff;
      border-radius: 0rpx 0rpx 32rpx 32rpx;
      .text_11 {
        line-height: 26.1rpx;
      }
      .text_12 {
        color: #c2afc3;
        line-height: 26.18rpx;
      }
    }
    .pos_6 {
      position: absolute;
      left: 40rpx;
      right: 40rpx;
      top: 906rpx;
    }
    .section_6 {
      padding: 40rpx 32rpx 34rpx;
      background-color: #ffffff;
      border-radius: 32rpx;
      box-shadow: 0rpx 4rpx 24rpx #ee82ff33;
      .image_8 {
        margin-bottom: 6rpx;
        width: 64rpx;
        height: 64rpx;
      }
      .text_13 {
        font-weight: 700;
        line-height: 26.2rpx;
      }
      .text_14 {
        line-height: 17.8rpx;
      }
      .image_9 {
        width: 40rpx;
        height: 40rpx;
      }
    }
    .pos_7 {
      position: absolute;
      left: 40rpx;
      right: 40rpx;
      top: 1042rpx;
    }
    .image_5 {
      width: 30rpx;
      height: 26rpx;
    }
    .font_5 {
      font-size: 24rpx;
      font-family: PingFang SC;
      color: #837386;
    }
    .text_15 {
      color: #b270f0;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 700;
      line-height: 24.48rpx;
      width: 612rpx;
    }
    .pos_8 {
      position: absolute;
      left: 50%;
      bottom: 385.48rpx;
      transform: translateX(-50%);
    }
    .section_7 {
      padding: 20rpx 40rpx;
      background-color: #ffffff;
      .text_16 {
        color: #837386;
        line-height: 25.96rpx;
      }
      .image_10 {
        width: 46rpx;
        height: 38rpx;
      }
      .text_17 {
        color: #f43d58;
        line-height: 29.68rpx;
      }
      .text-wrapper {
        padding: 32rpx 0;
        background-image: linear-gradient(126.3deg, #fb75d6 53.8%, #b270f0 95.3%);
        border-radius: 80rpx;
        width: 240rpx;
        height: 96rpx;
        .text_18 {
          color: #ffffff;
          line-height: 30.02rpx;
        }
      }
    }
    .pos_9 {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
	  z-index: 9999999999;
	  padding-bottom: 60rpx !important;
    }
    .font_3 {
      font-size: 28rpx;
      font-family: PingFang SC;
      line-height: 24.48rpx;
      font-weight: 700;
    }
    .section_8 {
      background-color: #ffffff;
      width: 750rpx;
      height: 68rpx;
    }
    .pos_10 {
      position: absolute;
      left: 0;
      right: 0;
      top: 1556rpx;
    }
  }
</style>